<template>
  <div>
    <Yq-header :needBack="true">
      <p slot="content">退款</p>
    </Yq-header>
    <div :style="boxStyle">
      <flexbox orient="vertical" :gutter="0" v-for="obligationList in obligationList">
        <flexbox-item>
          <group gutter="0">
            <flexbox>
              <flexbox-item :span="3.8">
                <p style="font-size: 15px;text-align:center;border-right: solid 1px #d9d9d9;color: #f95320;padding: 5px 0">{{obligationList.status}}</p>
              </flexbox-item>
              <flexbox-item>
                <p style="color: #636363;font-size: 15px">{{obligationList.applyTime}}</p>
              </flexbox-item>
            </flexbox>
          </group>
        </flexbox-item>
        <flexbox-item>
          <group gutter="0">
            <flexbox :gutter="0" style="border-bottom: solid 1px gainsboro;">
              <flexbox-item :span="4">
                <div style="display: block;width:80px;height:80px;margin:10px 5px 10px 15px;">
                  <!--<img :src=order.itemUrl alt="itemImg" style="width: 100%;"> 正式图片时可直接图片100%-->
                  <img :src=obligationList.pic alt="商品图片" style="width:80px;height:80px;">
                </div>
              </flexbox-item>
              <flexbox-item>
                <p style="line-height: 20px;font-size: 13px;color: #636363;">{{obligationList.itemName}}</p>
                <!--<p style="line-height: 20px;font-size: 14px;font-weight: bold;">￥{{obligationList.totalCount}}</p>-->
              </flexbox-item>
              <!--<p style="line-height: 30px;font-size: 14px;text-align: right;padding-right: 10px;">¥{{obligationList.price}}</p>-->
              <!--<p style="color: grey;line-height: 30px;font-size: 14px;text-align: right;padding-right: 10px;" >x{{obligationList.count}}</p>-->
              <!--</flexbox-item>-->
            </flexbox>
            <span style="display: block;border-bottom: solid 1px gainsboro;text-align: right;padding-right: 20px;line-height: 30px;font-size: 14px;color: #a9a9a9;">交易金额:¥{{obligationList.totalCount}}&nbsp;&nbsp;退款金额:¥{{obligationList.tuiprice}}</span>
            <div style="text-align: right;margin: 10px 20px 10px 0">
              <x-button mini style="background: #2b2c2c;color: white;" @click.native="getRefundDetailFn(obligationList.id)">查看详情</x-button>
            </div>
          </group>
        </flexbox-item>
      </flexbox>
    </div>
    <div style="width: 100%">
      <p style="text-align: center;color: blue;padding-bottom: 13px;line-height: 30px;" align="center">
        <a  :href="qqLink"><p style="color: #999999;padding-top: 30px">联系客服</p></a>
      </p>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem, XButton, Clocker } from 'vux'
  import * as urls from '../../../../api/urls'
  import * as types from '../../../../store/types'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      Flexbox,
      FlexboxItem,
      XButton,
      Clocker,
      YqHeader
    },
    data () {
      return {
        qqLink: '',
        boxStyle: 'min-height: 200px;border: solid 1px bisque;',
        obligationList: [
          {
            id: 1,
            status: '',
            time: '2017-03-02 17:30',
            pic: '../../../../../static/images/userImg.png',
            itemName: '商品名称商品名称商品名称商品名称商品名称',
            price: '50',
            count: 5,
            totalCount: 50
          }
        ]
      }
    },
    methods: {
      onHide () {
        console.log('on hide')
      },
      onShow () {
        console.log('on show')
      },
      getRefundDetailFn (refundId) {
        this.$store.commit(types.USER_ORDER, {refundId: refundId})
        this.$router.push({
          path: '/order/RefundDetail'
        })
        this.$router.go(1)
      },
      getRefundList () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.refundList, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.obligationList = res.data.list
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = '服务器错误，请稍后重试'
        })
      },
      weixinfn19 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      let qq = this.$store.state.empower.sysqq
      this.qqLink = 'http://wpa.qq.com/msgrd?v=3&uin=' + qq + '&site=qq&menu=yes'
      this.getRefundList()
      this.boxStyle = 'padding-top: 38px;min-height:' + (document.body.clientHeight - 38 - 93) + 'px'
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
      document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '0'
      this.weixinfn19()
    }
  }
</script>

<style scoped="scoped">
  .tab-swiper{
    height: auto;
  }
  .couponBox{
    border: solid 1px grey;
    margin: 10px 15px;
    border-radius: 5px;
  }
  .couponBox >p:nth-child(1){
    border-bottom: dashed 1px grey;
  }
  .couponBox >p >span{
    display: inline-block;
    font-size: 20px;
    padding: 0 10px;
  }
  .couponBox >p >span:nth-child(2){
    float: right;
  }
  .validity{
    text-align: right;
    line-height: 30px;
    padding-right: 10px;
  }
  .flex-demo {
    /*text-align: center;*/
    /*color: #fff;*/
    /*background-color: #20b907;*/
    border-radius: 4px;
    background-clip: padding-box;
    margin-top: 8px;
  }
  .day{
    font-size: 14px;
    color: white;
  }
</style>
